<template>
  <div :class="`tw-libvancheckbox x${_uid}`">
    <template v-if="texttype">
      <van-checkbox-group
        v-model="val"
        @change="changeValue"
        :max="parseInt(max)"
        :disabled="disabled"
        :checked-color="checkedColor"
        :direction="direction">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item"
            :title="`${item.label}`"
            @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox
              :shape="shape"
              :name="item.label"
              :disabled="item.disabled"
              :icon-size="iconsize"
              ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </template>
    <template v-else>
      <van-checkbox-group
        v-model="val"
        @change="changeValue"
        :max="parseInt(max)"
        :disabled="disabled"
        :checked-color="checkedColor"
        :direction="direction">
        <van-checkbox
          :shape="shape"
          :disabled="item.disabled"
          :name="item.label"
          :icon-size="iconsize"
          v-for="(item, index) in list"
          :key="item">
          {{item.label}}
          <!-- <i slot="icon" :class="suffixcls" v-if="suffixcls"></i> -->
        </van-checkbox>
      </van-checkbox-group>
    </template>
  </div>
</template>

<script>
import props from './props'

export default {
  name: 'libinput',

  props,

  data() {
    return {
      val: []
    }
  },

  methods: {
    changeValue () {
      // console.log('this', this.val)
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle()

      this.$emit('input', this.val)
      this.$emit('change', this.val)
    },

    setStyle () {
      let style = ''
      // `
      //   .el-input.x${this._uid} .el-input__inner {
      //     color: ${this.color};
      //     background-color: ${this.bgColor};
      //     border-color: ${this.borderColor};
      //   }
      //   .el-input.x${this._uid}.is-active .el-input__inner, .x${this._uid} .el-input__inner:focus {
      //     border-color: ${this.focusBorderColor};
      //   }
      // `

      const styleEl = document.getElementById(this._uid) || document.createElement('style')
      styleEl.id = this._uid
      styleEl.innerText = style.replace(/\n/g, '')

      document.head.appendChild(styleEl)
    }
  },

  computed: {
    style () {
      return {
      }
    }
  },

  mounted () {
    this.setStyle()
  },

  watch: {
    value () {
      this.val = this.value
    },

    style: {
      deep: true,
      handler () {
        this.setStyle()
      }
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
